<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/shoepublic.css">
    <link rel="stylesheet" href="./css/dianpujie.css">
    <link rel="stylesheet" href="./css/dpj-pbl.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" type="text/css" href="./css/default.css">
    <style>
    #gallery-wrapper {
        position: relative;
        max-width: 75%;
        width: 75%;
        margin: 50px auto;
    }
    
    img.thumb {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    .white-panel {
        position: absolute;
        background: white;
        border-radius: 5px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
        padding: 10px;
    }
    
    .white-panel h1 {
        font-size: 1em;
    }
    
    .white-panel h1 a {
        color: #A92733;
    }
    
    .white-panel:hover {
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
        margin-top: -5px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    
</style>
</head>
<body>
      <!-- 公共样式头部 -->
      <div class="header">
        <div class="w w1200">
            <div class="logo">
                <div class="logoImg">
                    <a href="javascript:;">
                        <img src="https://x.dscmall.cn/storage/images/common/shop_logo.gif" alt="大商创logo">
                    </a>
                </div>
            </div>
            <div class="header_con">
                <div class="site-nav">
                    <div class="fl ml-20">
                        <!-- 地图导航 -->
                        <div class="city-choie fl">
                            <i class="iconfoot icon-map-marker"></i>
                            <span class="ui-areamini-text">郑州市</span>
                        </div>
                        <!-- 登录注册 -->
                        <div class="text-info fl">
                            <a href="javascript:;" class="link-logo red">请登录</a>
                            <a href="javascript:;" class="link-regist">免费注册</a>
                        </div>
                    </div>
                    <!-- 头部右侧部分 -->
                    <ul class="quick-menu fr">
                        <li>
                            <div class="dt">
                                <a href="#">我的订单</a>
                            </div>
                        </li>
                        <li class="spacer"></li>
                        <li>
                            <div class="dt">
                                <a href="#">我的浏览</a>
                            </div>
                        </li>
                        <li class="spacer"></li>
                        <li>
                            <div class="dt">
                                <a href="#">我的收藏</a>
                            </div>
                        </li>
                        <li class="spacer"></li>
                        <li>
                            <div class="dt">
                                <a href="#">客户服务</a>
                            </div>
                        </li>
                        <li class="spacer"></li>

                        <li class="li_dorpdown" data-ectype="dorpdown">
                            <div class="dt dsc-cm">网站导航
                                <i class="iconfont icon-xiangxia"></i>
                                <div class="dsc-cm-bottom-line"></div>
                            </div>
                            <div class="dd dorpdown-layer">
                                <dl class="fore1">
                                    <dt>特色主题</dt>
                                    <dd>
                                        <div class="item"><a
                                                href="#"
                                                target="_blank">家用电器</a></div>
                                        <div class="item"><a
                                                href="#"
                                                target="_blank">男装女装</a></div>
                                        <div class="item"><a
                                                href="#"
                                                target="_blank">鞋靴箱包</a></div>
                                    </dd>
                                </dl>
                                <dl class="fore2">
                                    <dt>促销活动</dt>
                                    <dd>
                                        <div class="item"><a href="#">拍卖活动</a>
                                        </div>
                                        <div class="item"><a href="#">共创商品</a>
                                        </div>
                                        <div class="item"><a href="#">积分商城</a>
                                        </div>
                                        <div class="item"><a href="#">CMS频道</a></div>
                                        <div class="item"><a href="#">优惠活动</a>
                                        </div>
                                        <div class="item"><a href="#">超值礼包</a>
                                        </div>
                                        <div class="item"><a
                                                href="#">优惠券</a>
                                        </div>
                                        <div class="item"><a href="#">礼品卡</a>
                                        </div>
                                        <div class="item"><a href="#">预售商品</a>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="dsc-search-shopcar">
                    <!-- 搜商品 -->
                    <div class="form fl">
                        <form action="">
                            <input name="keywords" value="" placeholder="周大福" class="search-text">
                            <button class="button-goods">搜商品</button>
                            <button class="button-store">搜店铺</button>
                        </form>
                        <ul class="keyword">
                            <li>
                                <a href="#" target="_black">周大福</a>
                            </li>
                            <li>
                                <a href="#" target="_black">内衣</a>
                            </li>
                            <li>
                                <a href="#" target="_black">Five Plus</a>
                            </li>
                            <li>
                                <a href="#" target="_black">手机</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 我的购物车 -->
                    <div class="dsc-shopcar">
                        <div class="shopCar">
                            <a href="#">
                                <!-- <div class="shopcar-center"> -->
                                <i></i>
                                <span>我的购物车</span>
                                <em>14</em>
                                <!-- </div> -->
                            </a>
                        </div>
                        <div class="my-shopping-line"></div>
                        <div class="dorpdown-layer-car">
                            <div class="prompt">
                                <div class="nogoods fl">
                                    <b></b>
                                </div>
                                <div class="prompt-right fr">
                                    <span>购物车中还没有商品，赶紧选购吧！</span>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="header-nav">
            <div class="w1200 header-all-goods">
                <div class="categorys-type">
                    <a href="#">全部商品分类</a>
                </div>
                <div class="nav-main">
                    <ul>
                        <li class="header-current">
                            <a href="#">首页</a>
                        </li>
                        <li>
                            <a href="#">个护美妆</a>
                        </li>
                        <li>
                            <a href="#">服装城</a>
                        </li>
                        <li>
                            <a href="#">家用电器</a>
                        </li>
                        <li>
                            <a href="#">鞋靴箱包</a>
                        </li>
                        <li>
                            <a href="#">聚划算</a>
                        </li>
                        <li>
                            <a href="#">预售</a>
                        </li>
                        <li>
                            <a href="#">店铺街</a>
                        </li>
                        <li>
                            <a href="#">品牌专区</a>
                        </li>
                        <li>
                            <a href="#">公告</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<!-- 头部公共样式结束 -->

<!-- 100%大图开始 -->
<div class="bigImg">
    <img src="https://x.dscmall.cn/storage/data/afficheimg/1489190636366732843.jpg" alt="">
</div>

<!-- 省级联动 -->
<div class="selector">
    <div class="s-line">
        <div class="s-l-wrap">
            <div class="s-l-tit">分类：</div>
            <div class="s-l-value">
                <ul>
                    <li class="curr">全部</li>
                    <li>家用电器</li>
                    <li>男装女装</li>
                    <li>鞋靴箱包</li>
                    <li>手机数码</li>
                    <li>电脑办公</li>
                    <li>家居家访</li>
                    <li>个人化妆</li>
                    <li>休闲运动</li>
                </ul>
            </div>
        </div>
    </div>



    <div class="s-line parttwo">
        <div class="s-l-wrap  two">
            <div class="s-l-tit">省份：</div>
            <div class="s-l-value ">
                <ul>
                    <li class="curr">全部</li>
                    <li>北京市</li>
                    <li>天津市</li>
                    <li>河北省</li>
                    <li>山西省</li>
                    <li>内蒙古</li>
                    <li>辽宁省</li>
                    <li>吉林省</li>
                    <li>黑龙江省</li>
                 
                </ul>
            </div>
            <div class="s-l-value ">
                <ul>
                    <li >上海</li>
                    <li>江苏省</li>
                    <li>浙江省</li>
                    <li>安徽省</li>
                    <li>福建省</li>
                    <li>江西省</li>
                    <li>山东省</li>
                    <li>河南省</li>
                    <li>湖北省</li>
                </ul>
            </div>

            <div class="s-l-value ">
                <ul>
                    <li class="">湖南省</li>
                    <li>广东省</li>
                    <li>广西省</li>
                    <li>海南省</li>
                    <li>重庆市</li>
                    <li>四川省</li>
                    <li>贵州省</li>
                    <li>云南省</li>
                    <li>西藏自治区</li>
                </ul>
            </div>

            <div class="s-l-value ">
                <ul>
                    <li class="">陕西省</li>
                    <li>甘肃省</li>
                    <li>青海省</li>
                    <li>宁夏自治区</li>
                    <li>新疆自治区</li>
                    <li>台湾</li>
                    <li>香港</li>
                    <li>澳门</li>
                
                </ul>
            </div>
        </div>
    </div>

    <div class="s-line">
        <div class="s-l-wrap">
            <div class="s-l-tit">排序方式：</div>
            <div class="s-l-value">
                <ul>
                    <li class="libox">热门</li>
                    <li class="libox">销量</li>
                    <li class="libox">评分</li>
                </ul>
            </div>
        </div>
    </div>
    
</div>

<!-- 瀑布流 -->
<div class="street-list">


    <!-- <section id="gallery-wrapper"> -->
        <article class="white-panel">
            <img src="img/1.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="img/2.jpg" class="thumb">
            <h1><a href="#">Title 2</a></h1>
            <p>Description 2</p>
        </article>
        <article class="white-panel">
            <img src="img/3.jpg" class="thumb">
            <h1><a href="#">Title 3</a></h1>
            <p>Description 3</p>
        </article>
        <article class="white-panel">
            <img src="img/4.jpg" class="thumb">
            <h1><a href="#">Title 4</a></h1>
            <p>Description 4</p>
        </article>
        <article class="white-panel">
            <img src="img/5.jpg" class="thumb">
            <h1><a href="#">Title 5</a></h1>
            <p>Description 5</p>
        </article>
        <article class="white-panel">
            <img src="img/6.jpg" class="thumb">
            <h1><a href="#">Title 6</a></h1>
            <p>Description 6</p>
        </article>
        <article class="white-panel">
            <img src="img/7.jpg" class="thumb">
            <h1><a href="#">Title 7</a></h1>
            <p>Description 7</p>
        </article>
        <article class="white-panel">
            <img src="img/8.jpg" class="thumb">
            <h1><a href="#">Title 8</a></h1>
            <p>Description 8</p>
        </article>
        <article class="white-panel">
            <img src="img/9.jpg" class="thumb">
            <h1><a href="#">Title 9</a></h1>
            <p>Description 9</p>
        </article>
        <article class="white-panel">
            <img src="img/10.jpg" class="thumb">
            <h1><a href="#">Title 10</a></h1>
            <p>Description 10</p>
        </article>
        <article class="white-panel">
            <img src="img/11.jpg" class="thumb">
            <h1><a href="#">Title 11</a></h1>
            <p>Description 11</p>
        </article>
        <article class="white-panel">
            <img src="img/12.jpg" class="thumb">
            <h1><a href="#">Title 12</a></h1>
            <p>Description 12</p>
        </article>
        <article class="white-panel">
            <img src="img/13.jpg" class="thumb">
            <h1><a href="#">Title 13</a></h1>
            <p>Description 13</p>
        </article>
        <article class="white-panel">
            <img src="img/14.jpg" class="thumb">
            <h1><a href="#">Title 14</a></h1>
            <p>Description 14</p>
        </article>
        <article class="white-panel">
            <img src="img/15.jpg" class="thumb">
            <h1><a href="#">Title 15</a></h1>
            <p>Description 15</p>
        </article>
    <!-- </section> -->







</div>

<!-- 底部切换按钮 -->
<div class="pages">
    <button style="width: 30px; height: 30px;">&lt;</button>
    <button style="width: 30px; height: 30px;">1</button>
    <button style="width: 30px; height: 30px;">2</button>
    <button style="width: 30px; height: 30px;">&gt;</button>
</div>



<!-- 底部 -->

 <!-- 公共样式底部 -->
 <div class="footer-new">
    <!-- 上部 -->
    <div class="footer-new-top w1200">
        <!-- 公共样式上部左侧开始 -->
        <div class="service-list">
            <div class="service-item">
                <i class="f-icon f-icon-qi"></i>
                <span>七天包退</span>
            </div>
            <div class="service-item">
                <i class="f-icon f-icon-zheng"></i>
                <span>正品保障</span>
            </div>
            <div class="service-item">
                <i class="f-icon f-icon-hao"></i>
                <span>好评如潮</span>
            </div>
            <div class="service-item">
                <i class="f-icon f-icon-shan"></i>
                <span>闪电发货</span>
            </div>
            <div class="service-item">
                <i class="f-icon f-icon-quan"></i>
                <span>权威荣誉</span>
            </div>
        </div>
        <!-- 公共样式上部左侧结束 -->
        <!-- 公共样式上部右侧开始 -->
        <div class="contact">
            <div class="contact-item contact-item-first">
                <i class="f-icon f-icon-tel"></i>
                <span>4001-021-758</span>
            </div>
            <div class="contact-item">
                <a href="#" class="btn-chn">
                    <i class="f-icon f-icon-kefu"></i>
                    <span>咨询客服</span>
                </a>
            </div>
        </div>
        <!-- 公共样式上部右侧结束 -->

    </div>
    <!-- 中部 -->
    <div class="footer-new-con">
        <div class="fnc-wrap w1200">
            <!-- 公共样式底部中间左侧部分 -->
            <div class="help-list">
                <div class="help-item">
                    <h3>新手上路</h3>
                    <ul>
                        <li>
                            <a href="#">售后流程</a>
                        </li>
                        <li>
                            <a href="#">购物流程</a>
                        </li>
                        <li>
                            <a href="#">订购方式</a>
                        </li>
                    </ul>
                </div>
                <div class="help-item">
                    <h3>新手上路</h3>
                    <ul>
                        <li>
                            <a href="#">售后流程</a>
                        </li>
                        <li>
                            <a href="#">购物流程</a>
                        </li>
                        <li>
                            <a href="#">订购方式</a>
                        </li>
                    </ul>
                </div>
                <div class="help-item">
                    <h3>新手上路</h3>
                    <ul>
                        <li>
                            <a href="#">售后流程</a>
                        </li>
                        <li>
                            <a href="#">购物流程</a>
                        </li>
                        <li>
                            <a href="#">订购方式</a>
                        </li>
                    </ul>
                </div>
                <div class="help-item">
                    <h3>新手上路</h3>
                    <ul>
                        <li>
                            <a href="#">售后流程</a>
                        </li>
                        <li>
                            <a href="#">购物流程</a>
                        </li>
                        <li>
                            <a href="#">订购方式</a>
                        </li>
                    </ul>
                </div>
                <div class="help-item">
                    <h3>新手上路</h3>
                    <ul>
                        <li>
                            <a href="#">售后流程</a>
                        </li>
                        <li>
                            <a href="#">购物流程</a>
                        </li>
                        <li>
                            <a href="#">订购方式</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 公共样式底部中间右侧部分 -->
            <div class="qr-code">
                <div class="qr-item qr-item-first">
                    <div class="code_img">
                        <img src="https://x.dscmall.cn/storage/images/common/ecjia_qrcode.jpg" alt="">
                        <div class="code_txt">关注微信</div>
                    </div>
                </div>
                <div class="qr-item qr-item-last">
                    <div class="code_img">
                        <img src="https://x.dscmall.cn/storage/images/common/ecjia_qrcode.jpg" alt="">
                        <div class="code_txt">关注微信</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 下部 -->
    <div class="footer-new-bot">
        <div class="w1200">
            <p class="copyright_links">
                <a href="#">首页</a>
                <span class="spacer"></span>
                <a href="#">隐私保护</a>
                <span class="spacer"></span>
                <a href="#">联系我们</a>
                <span class="spacer"></span>
                <a href="#">免责条款</a>
                <span class="spacer"></span>
                <a href="#">公司简介</a>
                <span class="spacer"></span>
                <a href="#">商家入驻</a>
                <span class="spacer"></span>
                <a href="#">供应商入驻</a>
                <span class="spacer"></span>
                <a href="#">意见反馈</a>
                <span class="spacer"></span>
            </p>
             <p class="copyright_links">
                 <a href="#">b2b2c</a>
                 <span class="spacer"></span>
                 <a href="#">多用户商城系统</a>
                 <span class="spacer"></span>
                 <a href="#">商城系统</a>
                 <span class="spacer"></span>
                 <a href="#">ecjia新零售</a>
             </p>
             <p class="color-555">
                <span>ICP备案证书号:</span>
                <a href="#">沪ICP备14029880号-5</a>
             </p>
             <p class="color-555">
                 <a href="#">版权所有 © 2005-2021 大商创，并保留所有权利。POWERED BY DSCMALL</a>
             </p>
        </div>
    </div>
    <!-- 底部结束 -->
    <script src="./js/jquery-1.11.0.min.js"></script>
    <script src="./js/pinterest_grid.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#gallery-wrapper").pinterest_grid({
                no_columns: 5,
                padding_x: 20,
                padding_y: 20,
                margin_bottom: 50,
                single_column_breakpoint: 700
            });

        });
    </script>

 
</body>
</html>